<template>
  <div id="Servicestep">
    <group>
      <cell class="tit" :title="'售后单号 '+orderNum" :inline-desc="'状态: '+lastStatus">
      </cell>
    </group>
    <group class="stepBox" >
      <div class="progress" ref="pro" :style="{'min-height': heightData+'px'}">
        <ul>
          <li v-for="(item,index) in itemStep">
            <div>
              <div>
                <p :class="{'ch':index==0}">{{item.handle_details}}</p>
                <p>{{item.handle_time}}</p>
                <p>{{item.user_name}}</p>
              </div>
            </div>
            <em></em>
          </li>
        </ul>
      </div>
    </group>

  </div>
</template>

<script>
  import {  Cell , Group,GroupTitle,Flow, FlowState, FlowLine,cookie} from 'vux'
  import { sorts,sign } from '../../aes/make';
  import { Decrypt} from '../../aes/aes';
  import { getScheduleById } from '../../mock/api';
  export default {
    name: "service-step",
    components: {
      Group,
      Cell,
      GroupTitle,
      Flow,
      FlowState,
      FlowLine
    },
    data(){
      return{
        id:0,
        orderNum:'',
        itemStep:[],
        lastStatus:'',
        heightData:0
      }
    },
    computed:{

    },
    created () {
      let vue = this
      vue.updateTitle('售后进度');
      vue.updateGreenRightNum(2);
      vue.updatePreventGoBack(false);
      var he=window.screen.height;
      var box=document.getElementsByClassName('stepBox');
      this.heightData=he-115;
    },
    mounted(){
      this.itemFun();
    },
    methods: {
      itemFun(){
        this.id=this.$route.params.id;
        this.orderNum=this.$route.params.orderNum;
        var so=sorts();
        var uid=cookie.get('uid');
        var access_token=cookie.get('access_token');
        var json={
          custOrderId:this.id,
          requestType:0,
          sorts:so,
          uid:uid,
          access_token:access_token
        }
        var si=sign(json);
        json['sign']=si;
        getScheduleById(json).then((res)=>{
          console.log(res)
          if(res.code==40013){
            vue.$router.push({name: 'login', params: {}});
            return false;
          }
          if(res.code==2000){
            var jm=Decrypt(res.data);
            jm=JSON.parse(jm);
            // var jm=res.data;
            this.id=jm[0].id;
            this.lastStatus=this.$route.query.status;
            for(var j in jm){
              this.itemStep.push(jm[j]);
            }
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  @blue:#1babe3;
  @green:#51ac33;
  body,html{
    background-color: #ffffff !important;
  }
  .progress{
    padding-top:30px;
  }
  .progress ul{
    margin:0px 50px 0px;
  }
  .progress ul li{
    position: relative;
    height: 95px;
  }
  .progress ul li p{
    font-size: 12px;
    color: #646464;
    padding-left: 36px;
    margin-bottom: 5px;
  }
  .progress ul li p:first-of-type{
    font-size:14px ;
    color: #000000;
    background: url("../../assets/images/step.png") no-repeat left top;
    background-size: 16px 16px;
    margin-left: 1px;
  }
  .progress ul li p:first-of-type.ch{
    position: relative;
    z-index: 5;
    background: url("../../assets/images/step_check.png") no-repeat left top;
    background-size: 18px 18px;
    margin-left: 0px;
  }
  .progress ul li i{
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #ccc;
    border-radius: 100%;
  }
  .progress ul li em{
    position: absolute;
    top:15px;
    left:8px;
    display: block;
    width: 2px;
    height: 90px;
    background-color: #ccc;
  }
  .progress ul li:last-of-type em{
    display: none;
  }
  .progress span{
    font-size: 12px;
  }

  .progress ul li span{
    margin-left: 30px;
  }
</style>
